<template>
  <div>
    <div class="uploadImg">
      <!-- el-upload 组件用于文件上传，action 属性留空因为我们将使用自定义上传方法 -->
      <!-- 使用自定义的 handleUpload 方法来处理上传 -->
      <!-- 给上传组件注册引用，可以通过 this.$refs.upload 访问 -->
      <!-- 绑定文件列表，显示已选择的文件 -->
      <!-- 绑定上传成功的回调 -->
      <!-- 设置为 false 以禁用自动上传，需手动点击上传按钮 -->
      <el-upload action="#" 
      :http-request="handleUpload"  
      ref="upload" 
      :file-list="fileList"
      :on-success="uploadSuccess" 
      :auto-upload="false">
      <!-- 点击时触发文件选择 -->
        <el-button slot="trigger" size="small">选取文件</el-button>
        <!-- 点击时提交上传队列 -->
        <el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">上传</el-button>
      </el-upload>
    </div>
    <div class="imglist">
      <div class="img" v-for="img in imgList">
        <!-- 使用 v-for 指令循环渲染图片列表 -->
        <el-image  :key="img.id" :src="`http://localhost:9000/${img.name}`" style="width:300px"></el-image>
        <el-button @click="delImg(img.id)" class="del" size="small" icon="el-icon-delete" circle></el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'index', // 组件名称
  components: {}, // 用于注册所有组件的列表
  mixins: [], // 混入对象，可以包含一些可复用的功能
  props: {}, // 组件的属性列表，用于接收外部传入的数据
  data() {
    return {
      imgList: [], // 用于存储图片列表的数组
      fileList: [] // 用于存储文件上传列表的数组
    }
  },
  mounted() {
    this.getImage(); // 组件挂载完成后自动获取图片列表
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit(); // 提交上传，调用 Element UI upload 组件的 submit 方法
    },
    handleUpload(params) {
      const userinfo = JSON.parse(localStorage.getItem('userinfo')); // 解析本地存储中的用户信息
      const formdata = new FormData(); // 创建 FormData 对象用于文件上传
      formdata.append('id', userinfo.id); // 添加用户id到FormData
      formdata.append('carousel', params.file); // 添加上传的文件到FormData

      this.$http.post('carousel/backend/add', formdata, { // 发送 POST 请求到后端上传接口
        headers: {
          'Content-Type': 'multipart/form-data' // 设置请求头
        }
      }).then(res => { // 请求成功
        if (res.data.code === 1) {
          this.$message.success(res.data.message); // 显示成功消息
          this.getImage(); // 重新获取图片列表
        } else {
          this.$message.error(res.data.message); // 显示失败消息
        }
      })
      .catch(error => { // 请求失败
        console.error('上传失败：', error); // 打印错误信息
        this.$message.error('上传失败，请重试'); // 显示错误消息
      });
    },
    uploadSuccess() {
      // 此方法在图片上传成功后调用，目前只显示成功消息
      this.$message.success('图片上传成功');
    },
    getImage() {
      this.$http.get('/carousel/list') // 发送 GET 请求到后端获取图片列表
        .then(res => {
          if (res.data.code === 1) {
            this.imgList = res.data.list; // 更新图片列表
          }
        });
    },
    delImg(imgId) {
      const userinfo = this.getUserInfo(); // 获取用户信息
      this.$http.post('carousel/backend/remove', { id: userinfo.id, imgId: imgId }) // 发送 POST 请求到后端删除图片
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.message); // 显示成功消息
            this.imgList = this.imgList.filter(img => img.id !== imgId); // 从数组中移除被删除的图片
            this.getImage(); // 重新获取图片列表
          } else {
            this.$message.error(res.data.message); // 显示失败消息
          }
        })
        .catch(error => {
          console.error('删除图片失败：', error); // 打印错误信息
          this.$message.error('删除图片失败，请重试'); // 显示错误消息
        });
    },
    getUserInfo() {
      // 获取用户信息的方法，从本地存储中解析
      return JSON.parse(localStorage.getItem('userinfo'));
    }
  }
};
</script>
<style scoped>
.uploadImg {
  margin: 10px;
}

.imglist {
  width: 100%;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px;
}

.img {
  position: relative;
}

.del {
  position: absolute;
  top: -10px;
  right: -10px;
}
</style>